<template>
  <div>
    <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridEvents">
      <template #uid="{ row }">
        <vxe-input v-model="row.uid" />
      </template>
      <template #name="{ row }">
        <vxe-input v-model="row.name" />
      </template>
      <template #type="{ row }">
        <vxe-input v-model="row.type" />
      </template>
      <template #image="{ row }">
        <el-image style="width: 50px; height: 50px" :src="row.image" :fit="fit" />
      </template>
      <template #rmb="{ row }">
        <vxe-input v-model="row.rmb" />
      </template>
      <template #create_time="{ row }">
        <vxe-input v-model="row.create_time" />
      </template>
      <template #pager>
        <!--使用 pager 插槽-->
        <vxe-pager
          :layouts="[
            'Sizes',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'FullJump',
            'Total',
          ]"
          v-model:current-page="tablePage.currentPage"
          v-model:page-size="tablePage.pageSize"
          :total="tablePage.total"
          @page-change="handlePageChange"
        />
      </template>
    </vxe-grid>
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue'
  import VXETable from 'vxe-table'
  import { getUserList, insertUser, updateUser, deleteUser } from '/@/api/user-manager/user.ts'
  const tablePage = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10,
  })
  const defaultCulums = reactive([
    { type: 'checkbox', width: 50 },
    { type: 'seq', width: 60 },
    { field: 'uid', title: 'uid', slots: { edit: 'uid' } },
    { field: 'name', title: 'name', editRender: {}, slots: { edit: 'name' } },
    { field: 'type', title: 'type', editRender: {}, slots: { edit: 'type' } },
    { field: 'image', title: 'image', editRender: {}, slots: { default: 'image', edit: 'image' } },
    { field: 'rmb', title: 'rmb',  slots: { edit: 'rmb' } },
    { field: 'create_time', title: 'create_time',slots: { edit: 'create_time' } },
  ])
  const validRules = ref({
    uid: [{ required: true, message: '请输入uid' }],
    name: [{ required: true, message: '请输入名称' }],
    type: [{ required: true, message: '请输入类型' }],
    image: [{ required: true, message: '请输入image' }],
    rmb: [{ required: true, message: '请输入rmb' }],
  })
  const xGrid = ref()
  const gridOptions = reactive({
    border: true,
    keepSource: true,
    id: 'toolbar_demo_1',
    height: 530,
    editRules: validRules,
    printConfig: {},
    importConfig: {},
    exportConfig: {},
    columnConfig: {
      resizable: true,
    },
    customConfig: {
      storage: true,
    },
    editConfig: {
      trigger: 'click',
      mode: 'row',
      showStatus: true,
    },
    columns: defaultCulums,
    toolbarConfig: {
      buttons: [
        { code: 'myDelete', name: '删除' },
        { code: 'mySave', name: '保存', status: 'success' },
        { code: 'myExport', name: '导出数据', type: 'text', status: 'warning' },
      ],
      tools: [{ code: 'myPrint', name: '自定义打印' }],
      import: true,
      export: true,
      print: true,
      zoom: true,
      custom: true,
    },
    data: [
      {
        id: 367,
        uid: '15',
        name: '15',
        password: '15',
        type: 2,
        image: '15',
        rmb: 15,
        create_time: '2023-12-31 23:10:38',
      },
      {
        id: 368,
        uid: '16',
        name: '16',
        password: '16',
        type: 2,
        image: '16',
        rmb: 16,
        create_time: '2023-12-31 23:10:38',
      },
      {
        id: 369,
        uid: '17',
        name: '17',
        password: '17',
        type: 2,
        image: '17',
        rmb: 17,
        create_time: '2023-12-31 23:10:38',
      },
      {
        id: 370,
        uid: '18',
        name: '18',
        password: '18',
        type: 2,
        image: '18',
        rmb: 18,
        create_time: '2023-12-31 23:10:38',
      },
      {
        id: 371,
        uid: '19',
        name: '19',
        password: '19',
        type: 2,
        image: '19',
        rmb: 19,
        create_time: '2023-12-31 23:10:38',
      },
      {
        id: 372,
        uid: '20',
        name: '20',
        password: '20',
        type: 2,
        image: '20',
        rmb: 20,
        create_time: '2023-12-31 23:10:38',
      },
      {
        id: 373,
        uid: '21',
        name: '21',
        password: '21',
        type: 2,
        image: '21',
        rmb: 21,
        create_time: '2023-12-31 23:10:38',
      },
      {
        id: 374,
        uid: '22',
        name: '22',
        password: '22',
        type: 2,
        image: '22',
        rmb: 22,
        create_time: '2023-12-31 23:10:38',
      },
      {
        id: 375,
        uid: '23',
        name: '23',
        password: '23',
        type: 2,
        image: '23',
        rmb: 23,
        create_time: '2023-12-31 23:10:38',
      },
      {
        id: 376,
        uid: '24',
        name: '24',
        password: '24',
        type: 2,
        image: '24',
        rmb: 24,
        create_time: '2023-12-31 23:10:38',
      },
    ],
  })
  const gridEvents = {
    async toolbarButtonClick({ code }) {
      const $grid = xGrid.value
      if ($grid) {
        switch (code) {
          case 'myInsert': {
            $grid.insert({})
            break
          }
          case 'myDelete': {
            $grid.removeCheckboxRow()
            break
          }
          case 'mySave': {
            const $table = xGrid.value
            if ($table) {
              const errMap = await $table.validate()
              if (errMap) {
                VXETable.modal.message({ status: 'error', message: '校验不通过！' })
                return 
              } else {
                VXETable.modal.message({ status: 'success', message: '校验成功！' })
              }
            }
            const { insertRecords, removeRecords, updateRecords } = $grid.getRecordset()
            const promise = []
            if (insertRecords.length > 0) {
              const promise1 = insertUser(insertRecords).then((res) => {})
              promise.push(promise1)
            }
            if (removeRecords.length > 0) {
              const promise2 = deleteUser(removeRecords).then((res) => {})
              promise.push(promise2)
            }
            if (updateRecords.length > 0) {
              const promise3 = updateUser(updateRecords).then((res) => {})
              promise.push(promise3)
            }

            Promise.allSettled(promise).then(() => {
              getData()
              VXETable.modal.message({
                content: `新增 ${insertRecords.length} 条，删除 ${removeRecords.length} 条，更新 ${updateRecords.length} 条`,
                status: 'success',
              })
            })
            break
          }
          case 'myExport': {
            $grid.exportData({
              type: 'csv',
            })
            break
          }
        }
      }
    },
    toolbarToolClick({ code }) {
      const $grid = xGrid.value
      if ($grid) {
        switch (code) {
          case 'myPrint': {
            $grid.print()
            break
          }
        }
      }
    },
  }

  onMounted(() => {
    getData()
  })

  const getData = () => {
    const data = {
      page: 0,
    }
    getUserList(data).then((res) => {
      const data1 = res.msg
      gridOptions.data = data1
    })
  }

  const handlePageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage
    tablePage.pageSize = pageSize
  }

  const validEvent = async () => {
    const $table = xGrid.value
    if ($table) {
      const errMap = await $table.validate()
      if (errMap) {
        VXETable.modal.message({ status: 'error', message: '校验不通过！' })
      } else {
        VXETable.modal.message({ status: 'success', message: '校验成功！' })
      }
    }
  }
</script>
<style lang="scss" scoped>
  :deep(.vxe-table--body-wrapper){
    height: 500px !important;
  }
</style>